<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="" />
    <meta name="author" content="" />
    <link rel="icon" href="../../favicon.ico" />

    <title>Dashboard Template for Bootstrap</title>

    <link
      rel="stylesheet"
      href="https://cdn.staticfile.org/twitter-bootstrap/3.0.1/css/bootstrap.min.css"
    />
    <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.0.1/js/bootstrap.min.js"></script>

    <link href="dashboard.css" rel="stylesheet" />

    <script src="../js/axios.min.js"></script>
    <script src="../js/api.js"></script>
  </head>

  <body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button
            type="button"
            class="navbar-toggle collapsed"
            data-toggle="collapse"
            data-target="#navbar"
            aria-expanded="false"
            aria-controls="navbar"
          >
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Dashboard</a></li>
            <li><a href="#">Settings</a></li>
            <li><a href="#">Profile</a></li>
            <li><a href="#">Help</a></li>
          </ul>
          <form class="navbar-form navbar-right">
            <input type="text" class="form-control" placeholder="Search..." />
          </form>
        </div>
      </div>
    </nav>

    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
          <ul class="nav nav-sidebar">
            <li class="active">
              <a href="#">Overview <span class="sr-only">(current)</span></a>
            </li>
            <li><a href="#">Reports</a></li>
            <li><a href="#">Analytics</a></li>
            <li><a href="#">Export</a></li>
          </ul>
          <ul class="nav nav-sidebar">
            <li><a href="">Nav item</a></li>
            <li><a href="">Nav item again</a></li>
            <li><a href="">One more nav</a></li>
            <li><a href="">Another nav item</a></li>
            <li><a href="">More navigation</a></li>
          </ul>
          <ul class="nav nav-sidebar">
            <li><a href="">Nav item again</a></li>
            <li><a href="">One more nav</a></li>
            <li><a href="">Another nav item</a></li>
          </ul>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
          <h1 class="page-header">Dashboard</h1>

          <div id="send-div">
            <input type="text" name="" id="" />
            <input type="text" name="" id="" />
            <input type="text" name="" id="" />
            <input type="text" name="" id="" />
            <input
              type="button"
              name=""
              id=""
              value="发布"
              class="btn btn-primary"
            />
          </div>

          <h2 class="sub-header">Section title</h2>
          <div class="table-responsive">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>#</th>
                  <th>Header</th>
                  <th>Header</th>
                  <th>Header</th>
                  <th>Header</th>
                </tr>
              </thead>
              <tbody class="list">
                <!-- <tr>
                  <td>1,001</td>
                  <td>Lorem</td>
                  <td>ipsum</td>
                  <td>dolor</td>
                  <td>sit</td>
                </tr> -->
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

    <script>
      loadList();
      sendFN();

      // 3-删除功能
      // 调用删除接口 ，调用成功后-刷新页面或者 loadList
      async function delFn(pid) {
        console.log("delFn");
        //productDeleteAPI
        //
        let uid = localStorage.getItem("uid");
        let token = localStorage.getItem("token");
        console.log(pid);

        let params = { uid, token, pid };
        // 调用删除接口
        let { data } = await axios.get(productDeleteAPI, { params });
        console.log(data);
        //  删除成功以后  刷新列表
        loadList();
      }

      // 显示商品列表
      // 2-请求首页列表接口-》服务器返回的数据 -》 ul
      async function loadList() {
        // proudtListAPI
        //         参数
        // pagesize  每页获取几个数据
        // pagenum 获取第几页数据
        // uid  用户id
        let pagesize = 20;
        let pagenum = 0;
        let uid = localStorage.getItem("uid");
        let params = { pagenum, pagesize, uid };
        let { data } = await axios.get(proudtListAPI, { params });
        console.log(data);
        let productArr = data.data;
        console.log(productArr); //-> li
        let resArr = productArr.map(
          (pObj) => `
          <tr>
                  <td>${pObj.pname}</td>
                  <td>${pObj.pprice}</td>
                  <td><img src="${pObj.pimg}" alt="" /></td>
                  <td>
                    <button type="button" class="btn btn-danger" onclick="delFn(${pObj.pid})">删除</button>
                    </td>
                  <td><a  class="btn btn-primary" href="update.html?pid=${pObj.pid}">修改</a></td>
           </tr>
        `
        );
        console.log(resArr);
        $(".list").html(resArr.join(""));
      }

      // 发布功能
      // 1- 发布功能
      /*  给发布按钮添加点击事件，点击的时候获取输入框的值，调用发布接口 */
      function sendFN() {
        //
        // productAddAPI
        //         1.
        // pimg
        //     2.
        // pname
        //     3.
        // pprice
        //     4.
        // pdesc
        //     5.
        // uid  （可选）用户商品
        let ipts = document.querySelectorAll("#send-div input");
        ipts[4].onclick = async function () {
          let pname = ipts[0].value;
          let pprice = ipts[1].value;
          let pimg = ipts[2].value;
          let pdesc = ipts[3].value;
          let uid = localStorage.getItem("uid");
          let params = { pname, pprice, pimg, pdesc, uid };

          // axios.get(productAddAPI, { params }).then((res) => {
          //   let { data } = res;
          //   console.log(data);
          //   alert(data.msg);
          // });

          // get 方法 返回的是一个promise 对象
          // let p = axios.get(productAddAPI, { params });
          // console.log(p);
          // let res = await p;
          // console.log(res.data);

          // try catch  尝试执行try里的代码，一旦报错 就执行catch
          // try {
          //   let { data } = await axios.get(productAddAPI, { params });
          //   console.log(data);
          // } catch (error) {
          //   console.log(error);
          // }

          let { data } = await axios.get(productAddAPI, { params });
          //发布成功以后调用loadlist
          loadList();
        };
      }
    </script>
  </body>
</html>
